import { formatDate } from '@/utils/formatTime'
import { TableColumns } from '@pureadmin/table'
import { fenToYuan } from '@/utils'
import { DICT_TYPE } from '@/utils/dict'
import DictTag from '@/components/DictTag/src/DictTag.vue'

interface TableColumnList extends Array<TableColumns> {}

export function useTable() {
  const columns: TableColumnList = [
    { prop: 'id', label: '编号', width: 80, align: 'center' },
    { prop: 'userId', label: '用户ID', width: 100, align: 'center' },
    {
      prop: 'subject',
      label: '商品标题',
      minWidth: 180,
      align: 'left',
      slot: 'subject'
    },

    {
      label: '订单号',
      minWidth: 300,
      align: 'center',
      slot: 'orderNo'
    },

    {
      prop: 'price',
      label: '支付金额',
      minWidth: 100,
      align: 'center',
      formatter({ price }) {
        return '￥' + fenToYuan(price)
      }
    },
    {
      prop: 'refundPrice',
      label: '退款金额',
      minWidth: 100,
      align: 'center',
      formatter({ refundPrice }) {
        return '￥' + fenToYuan(refundPrice)
      }
    },
    {
      prop: 'channelFeePrice',
      label: '手续费',
      minWidth: 100,
      align: 'center',
      formatter({ channelFeePrice }) {
        return '￥' + fenToYuan(channelFeePrice)
      }
    },
    {
      prop: 'channelFeePrice',
      label: '结算金额',
      minWidth: 100,
      align: 'center',
      formatter({ channelFeePrice }) {
        return '￥' + fenToYuan(channelFeePrice)
      }
    },

    {
      prop: 'status',
      label: '支付状态',
      minWidth: 100,
      align: 'center',
      cellRenderer: ({ row }) => <DictTag type={DICT_TYPE.PAY_ORDER_STATUS} value={row.status} />
    },
    {
      prop: 'channelCode',
      label: '支付渠道',
      minWidth: 100,
      align: 'center',
      cellRenderer: ({ row }) => (
        <DictTag type={DICT_TYPE.PAY_CHANNEL_CODE} value={row.channelCode} />
      )
    },
    {
      prop: 'createTime',
      label: '创建时间',
      minWidth: 180,
      align: 'center',
      formatter({ createTime }) {
        return formatDate(createTime)
      }
    },
    {
      prop: 'successTime',
      label: '支付时间',
      minWidth: 180,
      align: 'center',
      formatter({ successTime }) {
        return formatDate(successTime)
      }
    },

    {
      prop: 'appName',
      label: '支付应用',
      minWidth: 100,
      align: 'center'
    },

    {
      label: '操作',
      minWidth: 100,
      align: 'center',
      slot: 'operation',
      fixed: 'right'
    }
  ]

  return {
    columns
  }
}
